<template>
  <div class="page white-stage">
    <div class="container add-follow-main">
      <div class="cell textarea-wrapper">
        <textarea placeholder="请输入跟进记录" v-model="follow.clue_desc" ></textarea>
      </div>

      <group class="group">
        <!-- <div class="cell">
          <div class="previewed-image">
            <img :src="defaultImg" />
          </div>
        </div> -->

        <selector direction="rtl" title="跟进方式" placeholder="请选择跟进方式" :options="followWayOptions" v-model="follow.clue_type" placeholder-align="right"></selector>

        <cell title="实际跟进时间：" :value="follow.insert_time"></cell>

        <cell title="跟进位置：">
           <div slot="value">
           <span class="location-ico"></span>
           </div>
        </cell>

        <cell title="通知他人：">
           <div slot="value">
           <span class="add-plus">+</span>
           </div>
        </cell>

        <datetime title="下次跟进时间" v-model="follow.next_time" placeholder="请选择下次跟进时间"></datetime>

      </group>

      <div class="btn-group">
        <span class="btn save-btn" @click="saveClue">保存</span>
      </div>

    </div>
  </div>
</template>

<script>
   import {XInput, Group, ChinaAddressData, XAddress, Selector, Datetime, Cell} from 'vux';
   import store from '../store';

   export default{
   data () {
     return {
     custom_type:1,
     defaultImg : 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490190406985&di=2b18eab8b5f2575acbd4d8672441ce38&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01e1b756613cf032f8754573ad2961.png',
     followWayOptions:[
      {
        key: 'DH#',
        value: '电话营销',
      },

      {
        key: 'YY#',
        value: '预约试听',
      },

      {
        key: 'HD#',
        value: '活动营销'
      },

      {
        key: 'DF#',
        value: '到访'
      }
     ],

     follow:{
      "custom_id": 1,
      "clue_desc": "",
      "clue_type": "DH#",
      "clue_insert_type": "SYS",
      "location_j": "",
      "location_w": "",
      "clue_location": "",
      "next_time": "2016-07-12",
      "insert_time" : "2016-07-12",
      "imgs": []
     }

     };
   },
   mounted() {
     console.debug('this.$route.query', JSON.stringify(this.$route.query));

     let query = this.$route.query;

     this.custom_type = query.custom_type
     this.follow.custom_id = query.id
     this.filterOptions = this.gbfilterOptions;
     this.callJsApi('biz.navigation.setTitle',{title:'写跟进'});
   },

   components:{
     XInput,
     Group,
     ChinaAddressData,
     XAddress,
     Selector,
     Datetime,
     Cell
   },

   methods:{

      saveClue () {

        console.log(JSON.stringify(this.follow), 'JSON.stringify(this.follow)');

        // this.$router.back();

        store.dispatch('saveClues', this.follow).then((response) => {
          if(response.data.errcode == 0) {
            alert('保存线索成功！');
            this.$router.back();
          } else {
            alert('系统出错!')
          }
        })
      },

   }

   }
</script>

<style lang="less">
  @import "../less/index.less";

  @add-plus-size:40px;

  @add-plus-color: rgb(76, 169, 229);

  .add-follow-main{
      .add-plus{
      display: inline-block;
      border: 1px solid @add-plus-color;
      width: @add-plus-size;
      height: @add-plus-size;
      line-height: @add-plus-size*.9;
      text-align: center;
      border-radius: 50%;
      font-size: 1.8em;
      font-weight: 20px;
      color: @add-plus-color;
      }

      .btn-group{
      margin-top: 15px;

      &>*{
        width: 80%;
        text-align: center;
        border-radius: 4px;
        padding: 10px;
        margin: 0 auto;
        border: 1px solid @add-plus-color;
        background-color: white;
        color: @add-plus-color;
        display: block;
      }

      }


      .textarea-wrapper{
        padding: 10px;
        &:extend(.clearfix all);

        textarea{
          display: block;
          border:none;
          font-size: 16px;
          height: 8rem;
          width: 100%;
          float: left;
        }
      }

      .location-ico{
      background: url("@{host}/img/location_ico.svg") no-repeat 0 0;
      width: 30px;
      height: 30px;
      display: inline-block;
      }
  }
</style>
